<template>
    <u-popup :show="show" @close="close" mode="bottom" :round="10" :closeable="false">
        <view @touchmove.prevent.stop class="popup-common ">
            <view class="title ">本次还款金额</view>

            <scroll-view scroll-y="true" class="h-[70vh]  ">
                <view class="commission-bg sidebar-margin my-[var(--top-m)] rounded-[var(--rounded-big)] py-[30rpx]">

                    <view class="flex justify-around commission-content">
                        <view class="flex flex-col items-center">
                            <text class="text-[30rpx] text-[var(--text-color-light9)]">剩余还款金额(元)</text>
                            <text class="text-[#303133] price-font text-[38rpx] font-500 mt-[16rpx]">{{
                                fen2yuan(formData.balance
                                ) }}</text>
                        </view>

                    </view>

                </view>
                <view class="card-template mt-[30rpx]">
                    <view class="font-500 text-[34rpx] text-[#333] leading-[42rpx]">本次还款金额
                    </view>
                    <view
                        class="flex pt-[30rpx] pb-[8rpx] items-center border-0 border-b-[2rpx] border-solid border-[#F1F2F5]">
                        <text class="pt-[4rpx] text-[40rpx] text-[#333] iconfont iconrenminbiV6xx price-font "></text>
                        <input type="digit"
                            class="h-[76rpx] leading-[76rpx] pl-[10rpx] flex-1 font-500 price-font text-[44rpx] bg-[#fff]"
                            v-model="formData.changeBalance" maxlength="7" :placeholder="'请输入本次还款金额'"
                            placeholder-class="apply-price" :adjust-position="false" />
                        <text @click="clearMoney" v-if="formData.changeBalance"
                            class="nc-iconfont nc-icon-cuohaoV6xx1 !text-[44rpx] text-[var(--text-color-light9)]"></text>
                    </view>
                    <view class="pt-[16rpx] flex items-center justify-between px-[4rpx]">
                        <view class="text-[34rpx] text-[var(--text-color-light6)] price-font leading-[36rpx]">
                            <text>&nbsp;</text>
                        </view>
                        <view class="text-[34rpx] text-primary leading-[36rpx]" @click="onHandleAll()">全额还款
                        </view>
                    </view>
                </view>

            </scroll-view>
            <!-- <u-keyboard mode="number" @change="valChange" @backspace="backspace" :overlay="false" :showTips="false"
                :tooltip="false" safeAreaInsetBottom :show="show" class="keyboard-common">
            </u-keyboard> -->
            <view class="btn-wrap">
                <button class="primary-btn-bg btn" @click="confirm">确认</button>
            </view>
        </view>
    </u-popup>
</template>
<script setup lang="ts">
import { ref, watch, computed, reactive } from 'vue'
import { fen2yuan, yuan2fen } from '@/utils/formatting';

const props = defineProps({
    orderInfo: {
        type: Object,
        default: () => {
            return {

            }
        }
    }, //订单信息
    paymentMap: {
        type: Array,
        default: () => {
            return []
        }
    }
})

const nowPaymenthds = ref() //当前使用的资产
const state = reactive({
    orderInfo: computed(() => {
        return props.orderInfo
    }), // 支付单信息
    payMethods: computed(() => {
        return props.paymentMap.find((ele: any) => {
            return ele.classify == nowPaymenthds.value.classify
        })
    }) as any, // 可选的支付方式
    payment: '', // 选中的支付方式
    payOrderList: [] as any, //当前支付方式的支付流水号
    activeName: '', //当前选中的支付方式
})

const nowPayment = ref<any>({})
const nowPaymentIndex = ref<any>() //当前支付方式的下标
// 监听支付方式的变化
watch(
    () => props.paymentMap,
    () => {
        if (nowPaymentIndex.value == undefined) {
            return
        }

        nowPayment.value = state.payMethods.items[nowPaymentIndex.value]
        if (nowPayment.value.payStatus) {
            nowPayment.value.usePayBalance = fen2yuan(nowPayment.value.paybalance)
        } else {
            nowPayment.value.usePayBalance = ''
        }
    }
)

const show = ref(false)
const emits = defineEmits(['confirm'])
const valChange = (val: any) => {

    nowPayment.value.usePayBalance += val;

};

const backspace = () => {
    // 删除value的最后一个字符
    if (nowPayment.value.usePayBalance.length) {
        nowPayment.value.usePayBalance = nowPayment.value.usePayBalance.substr(0, nowPayment.value.usePayBalance.length - 1);
    }
};
// 清空提现金额
const clearMoney = () => {
    formData.value.changeBalance = '';
}
const onHandleAll = () => {
    formData.value.changeBalance = fen2yuan(formData.value.balance)
}




const close = () => {
    show.value = false


}
const selectPayMent = (index: any) => {
    nowPaymentIndex.value = index
    let item = state.payMethods.items[nowPaymentIndex.value]
    nowPayment.value = item
    if (item.payStatus) {
        nowPayment.value.usePayBalance = fen2yuan(nowPayment.value.paybalance)
    } else {
        nowPayment.value.usePayBalance = ''
    }
}
const setNowPayment = () => {
    let selectPayMentIndexs = [] as any
    state.payMethods.items.forEach((element: any, index: any) => {
        if (element.payStatus) {
            selectPayMentIndexs.push(index)
        }
    })

    if (selectPayMentIndexs.length == 0) {
        nowPayment.value = {}
        selectPayMent(0)
    } else {
        nowPaymentIndex.value = selectPayMentIndexs[0]
        nowPayment.value = state.payMethods.items[nowPaymentIndex.value]
        state.activeName = nowPayment.value.assetsTitle
        nowPayment.value.usePayBalance = fen2yuan(nowPayment.value.paybalance)
    }
} //设置当前选中的支付方式
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用

const formData = ref({
    balance: '0',
    changeBalance: ''
})
/** 重置表单 */
const resetForm = () => {
    formData.value = {
        balance: '0',
        changeBalance: ''
    }
}
const open = (price: any) => {
    show.value = true
    resetForm()
    // 修改时，设置数据
    if (price) {
        formLoading.value = true
        try {
            formData.value.balance = price.totalPrice
            formData.value.changeBalance = '' // 变动余额默认0
        } finally {
            formLoading.value = false
        }
    }

}




const confirm = () => {
    if (Number(formData.value.changeBalance) <= 0) {
        uni.showToast({
            title: '本次还款金额不能为零',
            icon: 'none'
        })
        return
    }
    // 提交请求
    formLoading.value = true
    try {
        let params = {
            balance: yuan2fen(formData.value.changeBalance)
        }
        uni.showToast({
            title: '修改成功',
            icon: 'none'
        })
        // 发送操作成功的事件
        emits('confirm', params)
    } finally {
        formLoading.value = false
    }
    close()


}
const onHandleCancel = () => {
    let item = state.payMethods.items[nowPaymentIndex.value]
    item.payStatus = false

    emits('confirm', item, nowPaymenthds.value.classify)
}

defineExpose({
    open,

})
</script>
<script lang="ts">
export default {
    options: {
        styleIsolation: 'shared'
    }
}  
</script>
<style lang="scss" scoped>
:deep(.apply-price) {
    color: var(--text-color-light9);
    font-size: 34rpx;
    font-weight: normal;
    line-height: 76rpx;
}

.popup-common .title {
    font-weight: 500;
    text-align: center;
    font-size: 1.125rem;
    padding-top: 1.125rem;
    line-height: 1;
    padding-bottom: 0;
}

.commission-bg {
    background: #f6f6f6;
}

.commission-content>view {
    position: relative;
    width: 300rpx
}

.commission-content>view:after {
    content: "";
    position: absolute;
    width: .0625rem;
    height: 1.875rem;
    background-color: var(--temp-bg);
    top: 50%;
    right: 0;
    transform: translateY(-50%)
}

.commission-content>view:last-of-type:after {
    width: 0;
    height: 0
}
</style>